<template>
	<view class="container">
		<view v-if="position !== -1" class="content">
			<template v-for="(page, index) in pageList">
				<template v-if="page.name === 'children'">
					<children  v-show="position === index" v-model="page.value" :type="type"></children>
				</template>
				<template v-else-if="page.name === 'body'">
					<body-info v-if="position === index" v-model="page.value" :bmi="bmi" :type="type"></body-info>
				</template>
				<template v-else-if="page.name === 'care'">
					<child-care ref="childrenRef" v-show="position === index" v-model="page.value" :type="type"></child-care>
				</template>
				<template v-else-if="page.name === 'milestone'">
					<milestone v-show="position === index" v-model="page.value"></milestone>
				</template>
				<template v-else-if="page.name === 'develop'">
					<develop v-show="position === index" v-model="page.value"></develop>
				</template>
				<template v-else-if="page.name === 'end'">
					<end v-show="position === index"></end>
				</template>
			</template>
		</view>

		<cover-view v-if="position !== 0" class="action-pre" @click="preClick">
			<cover-view>上一页</cover-view>
		</cover-view>
		<cover-view class="action-next" @click="nextClick">
			<cover-view>{{position ===  pageList.length - 1 ? '完成': '下一页'}}</cover-view>
		</cover-view>
	</view>
</template>

<script>
	import Children from './page/children.vue'
	import BodyInfo from './page/body-info.vue'
	import ChildCare from './page/childcare.vue'
	import Milestone from './page/milestone.vue'
	import Develop from './page/develop.vue'
	import End from './page/end.vue'
	import { getChildrenMonthly, addChildrenMonthly, getMonthlyInfo, getMonthlyById } from '@/api/monthly.js'
	import { getBmiInfo, } from '@/api/evaluate.js'
	import {
		mapState,
	} from 'vuex';
	export default {
		components: {
			Children,
			BodyInfo,
			ChildCare,
			Milestone,
			Develop,
			End
		},
		data() {
			return {
				// 0编辑 1预览
				type: 'create',
				childrenId: '',
				pageList: [],
				
				bmi: {},
				
				position: -1,
				step: 0,
			}
		},
		computed: {
			...mapState({
				appType: state => state.app.appType,
				tchInfo: state => state.user.tchInfo,
			}),
		},
		onLoad(options) {
			this.childrenId = options.childrenId;
			this.month = options.month;
			this.type = options.type;
			this.id = options.id;
			console.log(this.appType);
			if (this.type === 'preview-p') {
				this.getMonthlyById();
			} else if (this.type === 'preview-tch') {
				this.getMonthly();
			} else {
				this.getChildrenMonthly();
			}
		},
		methods: {
			async nextClick() {
				const that = this
				if (this.position === this.pageList.length - 1) {
					if (this.type === 'create') {
						this.addMonthly();
						return;
					}else {
						uni.navigateBack({})
					}
				}
				if (this.position === 2) {
						const child = this.$refs.childrenRef;
						if (child[0].loadClick) {
							if(!await child[0].loadClick()) return
						}

				}
				
			this.position += 1;

			},
			
			preClick() {
				if (this.position === 2) {
						const child = this.$refs.childrenRef;
						if (child[0].prevClick) {
							if(!child[0].prevClick()) return
						    console.log(child[0].prevClick());
						}

				}
					
				this.position -= 1;
			},
			
			addMonthly() {
				let content = {};
				for (let index in this.pageList) {
					const item = this.pageList[index];
					content = { ...content, ...item.value}
				}
				console.log(content);
				const data = {
					content: JSON.stringify(content),
					childrenId: this.childrenId,
					childrenMonth: this.month
				}
				console.log(data);
				addChildrenMonthly(data).then(res => {
					console.log(res);
					uni.navigateBack({})
				})
			},

			getChildrenMonthly() {
				const params = {
					childrenId: this.childrenId,
					month: this.month
				};
				getChildrenMonthly(params).then(res => {
					console.log(res)
					this.wrapMonthly(res.data);
					this.getBmi(res.data)
				})
			},
			
			getMonthly() {
				const params = {
					childrenId: this.childrenId,
					month: this.month,
				}
				getMonthlyInfo(params).then(res => {
					console.log(res);
					const data = JSON.parse(res.data.content);
					this.wrapMonthly(data);
					this.getBmi(data)
				})
			},
			
			getMonthlyById() {
				getMonthlyById({id: this.id}).then(res => {
					const data = JSON.parse(res.data.content);
					this.wrapMonthly(data);
					this.getBmi(data)
				})
			},
			
			wrapChildrenPage(data) {
				const children = {
					childrenName: data.childrenName,
					childrenMonth: data.childrenMonth,
					childrenImage: data.childrenImage,
				}
				this.pageList.push({name: 'children', value: children});
			},
			
			wrapBodyGrow(data) {
				let gender = '';
				let birthday = '';
				if (this.type === 'create') {
					gender = data.children.gender;
					birthday = data.children.birthday;
				} else {				
					gender = data.gender;
					birthday = data.birthday;
				}
				const body = {
					height: data.height,
					weight: data.weight,
					header: data.header,
					childrenName: data.childrenName,
					childrenMonth: data.childrenMonth,
					gender,
					birthday,
					bodyImage: data.bodyImage
				}
				this.pageList.push({name: 'body', value: body});
			},
			
			wrapRecord(data) {
				const record = {
					sleepAvg: data.sleepAvg,
					sleepCount: data.sleepCount,
					sleepAmount: data.sleepAmount,
					diet: data.diet,
					dietAmount: data.dietAmount,
					dietCount: data.dietCount,
					recordImage: data.recordImage
				}
				this.pageList.push({name: 'care', value: record});
			},
			
			wrapMonthCheck(data) {
				const milestone = {
					label: data.label,
					content: data.content,
				}
				if (!this.$u.test.isEmpty(data.label)) {
					this.pageList.push({name: 'milestone', value: milestone});
				}
			},
			
			wrapMonthMilepost(data) {
				if (!this.$u.test.isEmpty(data.developDetailsList)) {
					for (let index in data.developDetailsList) {
						const item = data.developDetailsList[index];
						this.pageList.push({name: 'develop', value: item});
					}
				}
			},
			
			wrapMonthly(data) {
				this.wrapChildrenPage(data);
				this.wrapBodyGrow(data);
				this.wrapRecord(data);
				this.wrapMonthCheck(data);
				this.wrapMonthMilepost(data);
				this.pageList.push({name: 'end', value: ''});
			},
			
			getBmi(data) {
				let gender = '';
				let birthday = '';
				if (this.type === 'create') {
					gender = data.children.gender;
					birthday = data.children.birthday;
				} else {
					gender = data.gender;
					birthday = data.birthday;
				}
				
				const params = {
					name: data.childrenName,
					birthday: this.$u.timeFormat(birthday, 'yyyy-mm-dd'),
					gender: gender,
					height: data.height,
					weight: data.weight,
				}
				getBmiInfo(params).then(res => {
					console.log(res)
					this.bmi = res.data;
					this.position = 0;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	
	.container{
		width: 100%;
		height: 100%;
		position: relative;
		
		.action-pre{
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 20rpx;
			right: 120rpx;
			width: 88rpx;
			height: 88rpx;
			// background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
			background: #F5AC3C;
			border: 3rpx solid rgba(255,255,255,0.3);
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(164,164,164,0.2);
			border-radius: 50%;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 36rpx;
		}
		
		.action-next{
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 20rpx;
			right: 20rpx;
			width: 88rpx;
			height: 88rpx;
			// background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
			background: #F5AC3C;
			border: 3rpx solid rgba(255,255,255,0.3);
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(164,164,164,0.2);
			border-radius: 50%;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 36rpx;
		}

	}
	.content {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>